<template>
  <div id="home">
    <!--轮播图片-->
    <el-carousel :autoplay="false" height="416px" class="hidden-md-and-down" v-if="bannerCovers.length>0">
      <el-carousel-item v-for="bannerCover of bannerCovers" :key="bannerCover.id">
        <img :src="bannerCover.src" style="width:100%;height:auto;">
      </el-carousel-item>
    </el-carousel>
    <!--热门推荐-->
    <TemplateOfList1 v-if="recommendGoods.length>0" title="热门推荐" :items="recommendGoods"></TemplateOfList1>
    <!--热门服务-->
    <TemplateOfList2 v-if="serviceCovers.length>0" title="热门服务" :items="serviceCovers"></TemplateOfList2>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        bannerCovers: [], // 轮播图类别封面
        serviceCovers: [], // 热门服务类别封面
        recommendGoods: [], // 店主推荐商品
      }
    },
    created() {
      /**
       * 初始化数据
       */
      this.selectCoverType().then(() => {
        return this.selectRecommendGoods();
      });
    },
    methods: {
      /**
       * 查询封面类别信息
       */
      selectCoverType() {
        return this.$postRequest('/gdd/website/selectCoverTypeCascade', {
          names: ['轮播图', '热门服务']
        }).then(response => {
          const this_ = this;
          response.data.map(coverType => {
            if (coverType.name.includes('轮播图')) {
              this_.bannerCovers = coverType.cover;
            } else if (coverType.name.includes('热门服务')) {
              this_.serviceCovers = coverType.cover;
            }
          });
        });
      },
      /**
       * 查询店主推荐商品
       */
      selectRecommendGoods() {
        return this.$postRequest('/gdd/website/selectGoodsCascade', {
          isActive: '0',
          isRecommend: '0'
        }).then(response => {
          this.recommendGoods = response.data;
        });
      }
    }
  }
</script>

<style scoped>
  @import "../../assets/css/TemplateOfList.css";
</style>
